﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #main {
        width: 300px;
        margin: 100px auto;
    }

        #main input {
            width: 291px;
            margin-bottom: 2px;
            height: 30px;
            outline: none;
        }

        #main button {
            width: 71px;
            height: 50px;
            font-size: 20px;
            cursor: pointer;
        }

    html {
        background: linear-gradient(to right, #ff0052, #0072ff);
        height: 100%;
    }
</style>

<body>
    <div id="main">
        <input type="text" name="number" class="operation">
        <input type="text" name="number" class="result">
        <div id="buttons">
            <button onclick="empty()" value="C">C</button>
            <button onclick="square()" value="x^2">x^2</button>
            <button onclick="sqrt()" value="sqrt">sqrt</button>
            <button onclick="insert('/')" value="/">/</button>
            <button onclick="insert(7)" value="7">7</button>
            <button onclick="insert(8)" value="8">8</button>
            <button onclick="insert(9)" value="9">9</button>
            <button onclick="insert('*')" value="*">x</button>
            <button onclick="insert(4)" value="4">4</button>
            <button onclick="insert(5)" value="5">5</button>
            <button onclick="insert(6)" value="6">6</button>
            <button onclick="insert('-')" value="-">-</button>
            <button onclick="insert(1)" value="1">1</button>
            <button onclick="insert(2)" value="2">2</button>
            <button onclick="insert(3)" value="3">3</button>
            <button onclick="insert('+')" value="+">+</button>
            <button onclick="back()" value="<"><</button>
            <button onclick="insert(0)" value="0">0</button>
            <button onclick="insert('.')" value=".">.</button>
            <button onclick="result()" value="=">=</button>
        </div>
    </div>
    <script>
        var ope = document.querySelector('.operation');
        var res = document.querySelector('.result');
        var btn = document.querySelectorAll('button');

        function insert(num) {
            ope.value = ope.value + num;
        }

        function empty() {
            ope.value = null;
            res.value = null;
        }

        function back() {
            let exp = ope.value;
            ope.value = exp.slice(0, exp.length - 1);
        }

        function result() {
            if (ope.value == '') {
                alert('请输入计算内容');
            } else {
                res.value = eval(ope.value);
            }
        }

        function square() {
            let squ = ope.value;
            res.value = Math.pow(squ, 2);
        }

        function sqrt() {
            let sqr = ope.value;
            res.value = Math.sqrt(sqr);
        }</script>
</body>

</html>

